<template>
	<view>
		<up-popup :mode="mode" :show="show" @close="close" :closeable="closeable" :round="round" :safeAreaInsetBottom="false">
			<view :style="{'maxHeight': height+'rpx','width':mode=='center'?'85vw':'100vw'}" class="popupPicker">
				<view v-if="$slots.title">
					<slot name="title" />
				</view>
				<view v-else class="fr-ac-jc fs-36 bold mb-30">{{title}}</view>
				
				<view class="">
					<image v-if="emptyUrl" :src="emptyUrl" mode="widthFix" style="width: 60%;height: 200rpx;" class="my-39"></image>
					<view class="w-100">
						<slot>
							<view class="fs-32" v-if="content">{{content}}</view>
							<rich-text class="" v-if="template" :nodes="template"></rich-text>
						</slot>
					</view>
					<view v-if="showCancel || showEmpty" class="mt-60 fr-ac-jsb w-100">
						<view v-if="showCancel" class="cancel fr-ac-jc flex-1" @click="cancel">{{cancelButton}}</view>
						<view v-if="showCancel" class="w-5"></view>
						<view v-if="showEmpty" class="empty fr-ac-jc flex-1" @click="empty">{{emptyButton}}</view>
					</view>
				</view>
				<up-gap height="15"></up-gap>
			</view>
		</up-popup>
	</view>
</template>

<script>
	export default {
		props: {
			//是否显示
			show: {
				default: false,
				type:Boolean
			},
			//弹窗默认高度
			height: {
				default: 800,
				type:[Number, String]
			},
			//选择器标题
			title: {
				default: "切换档案",
				type:String
			},
			//选择器内容
			content: {
				default: "",
				type:String
			},
			//是否展示确认按钮
			showEmpty: {
				default: true,
				type:Boolean
			},
			//确认按钮文字
			emptyButton: {
				default: "去完成",
				type:String
			},
			//内容为空
			emptyUrl:{
				default: "",
				type:String
			},
			showCancel: {
				default: false,
				type:Boolean
			},
			cancelButton: {
				default: "取消",
				type:String
			},
			mode:{
				default: "bottom",
				type:String
			},
			template: {
				default: "",
				type:String
			},
			closeable: {
				default: false,
				type:Boolean
			},
			round:{
				default: 15
			}
		},
		data() {
			return {
	
			};
		},
		methods: {
			close(){
				this.$emit('close')
			},
			empty(){
				this.$emit('empty')
			},
			cancel(){
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss">
	.popupPicker{
		// border-radius: 20px 20px 0 0;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
	}
	.empty{
		height: 80rpx;
		background: var(--color);
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #fff;
		border: 1px solid var(--color);
	}
	.cancel{
		height: 80rpx;
		background: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #000;
		border: 1px solid #B8B8B8;
	}
</style>